<template>
	<view>
		<view>
			<u-toast ref="uToast" show="true" />
		</view>
		<u-loading-page :loading="loadShow" bgColor="#ffffff94;" loadingColor="#3996e6;" color="#3996e6;"
			:loadingText="loadingText" fontSize="30rpx" ref="uLoad"></u-loading-page>
		<view v-if="load">
			<u-sticky>
				<u-alert title="带红色*号的为必填项,其他可以选填" type="warning" closable showIcon></u-alert>
			</u-sticky>
			<uni-card title="主要内容" sub-title="此处为土地主要信息,请认真填写" extra="土地信息">
				<u--form :model="plot" :rules="rules" ref="plotRef">
					<u-form-item prop="avatar" label="主图:" labelWidth="110rpx" required>
						<u-upload :fileList="avatar" @afterRead="afterRead" @delete="deletePic" name="avatar"
							:maxCount="1"></u-upload>
					</u-form-item>
					<u-form-item prop="avatar" label="背景图:" labelWidth="110rpx" required>
						<u-upload :fileList="banner" @afterRead="afterRead" @delete="deletePic" name="banner"
							:maxCount="1"></u-upload>
					</u-form-item>
					<u-form-item prop="plotName" label="土地名称:" labelWidth="140rpx" required>
						<u--input placeholder="请输入土地名称" border="bottom" clearable v-model="plot.plotName"></u--input>
					</u-form-item>
					<u-form-item prop="name" label="所属人姓名:" labelWidth="170rpx" required>
						<u--input placeholder="请输入姓名" border="bottom" clearable v-model="plot.name"></u--input>
					</u-form-item>
					<u-form-item prop="phone" label="联系方式:" labelWidth="140rpx" required>
						<u--input placeholder="请输入联系方式" border="bottom" clearable v-model="plot.phone" type="number">
						</u--input>
					</u-form-item>
					<u-form-item prop="businessType" label="土地类型:" labelWidth="140rpx" required>
						<u-picker :show="businessTypeShow" :columns="businessTypeColumns"
							@cancel="businessTypeShow=false" @confirm="confirmBusinessType()" keyName="label">
						</u-picker>
						<view style="display: flex;">
							<view style="width: 150rpx;">
								<u--text :text="getBusinessType()" :type="getType(plot.businessType)"></u--text>
							</view>
							<u-button type="success" text="选择土地类型" size="mini" @click="businessTypeShow=true">
							</u-button>
						</view>
					</u-form-item>
					<u-form-item prop="openType" label="是否公开:" labelWidth="140rpx" required>
						<u-picker :show="openTypeShow" :columns="openTypeColumns" @cancel="openTypeShow=false"
							@confirm="confirmOpenType()" keyName="label"></u-picker>
						<view style="display: flex;">
							<view style="width: 150rpx;">
								<u--text :text="getOpenType()" :type="getType(plot.openType)"></u--text>
							</view>
							<u-button type="warning" text="谁能看到土地" size="mini" @click="openTypeShow=true">
							</u-button>
						</view>
					</u-form-item>
					<u-form-item prop="address" label="所在位置:" labelWidth="140rpx" required>
						<u--text :text="plot.address" size="20rpx" lines="1" suffixIcon="file-text-fill"
							iconStyle="font-size: 19px" @click="copyAddress()"></u--text>
						<u-button type="primary" text="打开地图以定位土地所在位置" size="mini" @click="dinwei">
						</u-button>
					</u-form-item>
					<u-form-item prop="content" label="土地详情" labelWidth="140rpx" required>
						<u-button type="primary" text="去编辑土地详情" @click="editor.open" size="small" icon="edit-pen">
						</u-button>
						<!--富文本-->
						<view>
							<uni-drawer ref="showEditor" mode="left" width="410" :maskClick=false>
								<view>	
									<robin-editor ref="editor" class="editor" v-model="editor.context" muiltImage="true"
										compressImage="false" :imageUploader="editorUploadImg" @cancel="editor.cancel"
										@save="editor.save" @setUrlId="setUrlId">
									</robin-editor>
								</view>
							</uni-drawer>
						</view>
					</u-form-item>
				</u--form>
			</uni-card>

			<uni-card title="其他信息" sub-title="完善土地信息将会获得更多展示空间哦~" extra="选填内容">
				<u--form :model="plot" :rules="rules" ref="plotRef">
					<u-form-item prop="label" label="标签:" labelWidth="140rpx">
						<view style="display: flex;">
							<view v-for="(item,index) in plot.label">
								<u-tag :text="item" size="mini" type="warning" closable :type="getType(index)"
									@close="removeLabel(index)"></u-tag>
							</view>
						</view>
						<view>
							<u-modal :show="addLabelShow" title="添加新标签" showCancelButton @confirm="addLabel()"
								@cancel="addLabelShow=false">
								<view class="slot-content">
									<u--input placeholder="请输入标签内容" clearable v-model="newLabel" maxlength="4">
									</u--input>
								</view>
							</u-modal>
							<u-button type="primary" plain text="添加标签(最多可添加4个)" size="mini" @click="addLabelShow=true">
							</u-button>
						</view>
					</u-form-item>
					<u-form-item prop="overview" label="土地简介:" labelWidth="140rpx">
						<u--textarea v-model="plot.overview" placeholder="请输入内容" count maxlength="50">
						</u--textarea>
					</u-form-item>
					<u-form-item prop="lon" label="总长:" labelWidth="90rpx">
						<u-input placeholder="请输入土地总长" border="bottom" clearable v-model="plot.lon" @change="compute()"
							type="digit">
							<u--text text="米" slot="suffix" margin="0 3px 0 0" type="tips"></u--text>
						</u-input>
					</u-form-item>
					<u-form-item prop="wide" label="总宽:" labelWidth="90rpx">
						<u-input placeholder="请输入土地总宽" border="bottom" clearable v-model="plot.wide" @change="compute()"
							type="digit">
							<u--text text="米" slot="suffix" margin="0 3px 0 0" type="tips"></u--text>
						</u-input>
					</u-form-item>
					<u-form-item prop="mu" label="占地面积:" labelWidth="140rpx">
						<u-input placeholder="请输入占地面积" border="bottom" clearable v-model="plot.mu" type="digit">
							<u--text text="亩" slot="suffix" margin="0 3px 0 0" type="tips"></u--text>
						</u-input>
					</u-form-item>
					<u-form-item prop="deposit" label="租赁押金:" labelWidth="140rpx">
						<u-input placeholder="请输入押金" border="bottom" clearable v-model="plot.deposit" type="digit">
							<u--text text="元" slot="suffix" margin="0 3px 0 0" type="tips"></u--text>
						</u-input>
					</u-form-item>
					<u--text text="建议您将开放和关闭时间设置在06:00-20:00这个时间段" size="22rpx" color="#dedede"></u--text>
					<view v-if="plot.businessType==0||plot.businessType==2">
						<u-form-item prop="pickOpenTime" label="采摘开放时间:" labelWidth="200rpx">
							<u-datetime-picker :show="pickOpenTimeShow" v-model="plot.pickOpenTime" mode="time"
								@confirm="confirmPickOpenTimeShow" @cancel="pickOpenTimeShow=false">
							</u-datetime-picker>
							<view style="display: flex;">
								<view style="width: 150rpx;">
									<u--text :text="plot.pickOpenTime"></u--text>
								</view>
								<u-button type="primary" text="选择采摘开放时间" size="mini" @click="pickOpenTimeShow=true">
								</u-button>
							</view>
						</u-form-item>
						<u-form-item prop="pickOverTime" label="采摘关闭时间:" labelWidth="200rpx">
							<u-datetime-picker :show="pickOverTimeShow" v-model="plot.pickOverTime" mode="time"
								@confirm="confirmPickOverTimeShow" @cancel="pickOverTimeShow=false">
							</u-datetime-picker>
							<view style="display: flex;">
								<view style="width: 150rpx;">
									<u--text :text="plot.pickOverTime"></u--text>
								</view>
								<u-button type="error" text="选择采摘关闭时间" size="mini" @click="pickOverTimeShow=true">
								</u-button>
							</view>
						</u-form-item>
					</view>
					<view v-if="plot.businessType==1||plot.businessType==2">
						<u-form-item prop="growOpenTime" label="种植开放时间:" labelWidth="200rpx">
							<u-datetime-picker :show="growOpenTimeShow" v-model="plot.growOpenTime" mode="time"
								@confirm="confirmGrowOpenTimeShow" @cancel="growOpenTimeShow=false">
							</u-datetime-picker>
							<view style="display: flex;">
								<view style="width: 150rpx;">
									<u--text :text="plot.growOpenTime"></u--text>
								</view>
								<u-button type="primary" text="选择种植开放时间" size="mini" @click="growOpenTimeShow=true">
								</u-button>
							</view>
						</u-form-item>
						<u-form-item prop="growOverTime" label="种植关闭时间:" labelWidth="200rpx">
							<u-datetime-picker :show="growOverTimeShow" v-model="plot.growOverTime" mode="time"
								@confirm="confirmGrowOverTimeShow" @cancel="growOverTimeShow=false">
							</u-datetime-picker>
							<view style="display: flex;">
								<view style="width: 150rpx;">
									<u--text :text="plot.growOverTime"></u--text>
								</view>
								<u-button type="error" text="选择种植关闭时间" size="mini" @click="growOverTimeShow=true">
								</u-button>
							</view>
						</u-form-item>
					</view>
				</u--form>
			</uni-card>
			<u-button type="primary" text="保存信息" @click="savePlot" size="large"></u-button>
		</view>
	</view>
</template>

<script>
	import service from "@/utils/service.js";
	import {
		pathToBase64
	} from "@/js_sdk/mmmm-image-tools/index";
	export default {
		data() {
			let that = this;
			return {
				id: "",
				type: 1,
				load: false,
				avatar: [],
				banner: [],
				plot: {
					content: "",
				},
				loadShow: true,
				loadingText: "土地信息加载中...",
				addLabelShow: false,
				newLabel: "",
				businessTypeShow: false,
				openTypeShow: false,
				pickOpenTimeShow: false,
				pickOverTimeShow: false,
				growOpenTimeShow: false,
				growOverTimeShow: false,
				businessTypeColumns: [
					[{
							label: "只摘菜",
							type: 0
						},
						{
							label: "只种菜",
							type: 1
						},
						{
							label: "均支持",
							type: 2
						}
					]
				],
				openTypeColumns: [
					[{
							label: "公开",
							type: 1
						},
						{
							label: "私有",
							type: 2
						}
					]
				],
				editor: {
					// 空文本展位
					placeholder: '请编辑土地详情，可插入图片',
					// 富文本内容
					context: '',
					// 富文本临时内容
					tempText: '',
					// 初始值
					initial: "<p><br></p>",
					open() {
						this.$refs.showEditor.open()
					},
					save(e) {
						console.log("富文本保存事件 : ", e)
						// 如果跟初始值一致则不进行赋值
						if (e.html !== this.editor.initial) {
							this.editor.context = service.copy(e.html)
							this.plot.content = service.copy(e.html)
						}
						that.editor.close();
					},
					cancel(e) {
						that.editor.close();
					},
					close() {
						that.$refs.showEditor.close()
					},
				},
				rules: {
					'avatar': {
						type: "string",
						required: true,
						message: '请上传主图',
						trigger: ['blur']
					},
					'plotName': {
						type: "string",
						required: true,
						message: '请输入土地名称',
						trigger: ['blur', 'change']
					},
					'banner': {
						required: true,
						message: '请上传背景图，可与主图一致',
						trigger: ['blur', 'change']
					},
					'name': {
						type: "string",
						required: true,
						message: '请输入土地持有人姓名',
						trigger: ['blur', 'change']
					},
					'phone': {
						type: "string",
						required: true,
						message: '请输入联系方式',
						trigger: ['blur', 'change']
					},
					'businessType': {
						required: true,
						message: '请选择土地类型',
						trigger: ['blur', 'change']
					},
					'openType': {
						required: true,
						message: '请选择是否公开土地',
						trigger: ['blur', 'change']
					},
					'address': {
						required: true,
						message: '请点击按钮以定位土地所在位置(先打开gps)',
						trigger: ['blur', 'change']
					},
					'content': {
						required: true,
						message: '请编辑土地详情',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onLoad(e) {
			this.imgApi = this.$reqConfig.URLIMAGE
			this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
			this.token = uni.getStorageSync("merchantsToken").token
			this.id = e.id
			this.getInfo()
		},


		methods: {
			savePlot() {
				if (!this.$comm.checkNull(this.plot.avatar)) {
					this.$refs.uToast.show({
						message: "请上传土地主图",
						type: "warning"
					})
					return;
				}
				if (!this.$comm.checkNull(this.plot.banner)) {
					this.$refs.uToast.show({
						message: "请上传土地详情页背景图",
						type: "warning"
					})
					return;
				}
				if (!this.$comm.checkNull(this.plot.plotName)) {
					this.$refs.uToast.show({
						message: "请输入土地名称",
						type: "warning"
					})
					return;
				}
				if (!this.$comm.checkNull(this.plot.name)) {
					this.$refs.uToast.show({
						message: "请输入所属人名称",
						type: "warning"
					})
					return;
				}
				if (!this.$comm.checkNull(this.plot.phone)) {
					this.$refs.uToast.show({
						message: "请输入联系方式",
						type: "warning"
					})
					return;
				}
				if (!this.$comm.blur1(this.plot.phone)) {
					return;
				}
				console.log("this.plot.businessType: ", this.plot.businessType);
				if (!this.$comm.checkNull(this.plot.businessType)) {
					this.$refs.uToast.show({
						message: "请选择土地类型",
						type: "warning"
					})
					return;
				}
				if (!this.$comm.checkNull(this.plot.openType)) {
					this.$refs.uToast.show({
						message: "请选择公开类型",
						type: "warning"
					})
					return;
				}
				if (!this.$comm.checkNull(this.plot.address, this.plot.lat, this.plot.lng)) {
					this.$refs.uToast.show({
						message: "请打开gps点击上方按钮以定位土地位置",
						type: "warning"
					})
					return;
				}
				if (!this.$comm.checkNull(this.plot.content)||this.plot.content == "<p></p>") {
					this.$refs.uToast.show({
						message: "请编辑土地详情",
						type: "warning"
					})
					return;
				}
				if (this.plot.content.includes(this.imgApi)) {
					this.plot.content = this.plot.content
						.replace(new RegExp(this.imgApi, "gm"), "");
				}
				this.plot.label = JSON.stringify(this.plot.label)
				this.plot.app = "wx"
				this.loadShow = true
				this.loadingText = "信息保存中..."
				this.$axios({
					url: "/merchant/merchantVegetablePlot/savePlot",
					method: "post",
					data: {
						...this.plot
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then((res) => {
					this.loadShow = false
					if (res.code == 0) {
						this.$refs.uToast.show({
							message: "保存成功",
							type: "success"
						})
					}
					this.goPage()
				})

			},
			goPage() {
				uni.redirectTo({
					url: "./regionList"
				})
			},
			getInfo(id) {
				this.$axios({
					url: "/merchant/merchantVegetablePlot/detail",
					method: "post",
					data: {
						id: this.id
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then((res) => {
					this.plot = res.result
					this.plot.label = JSON.parse(this.plot.label)
					this.avatar.push({
						url: this.imgApi + this.plot.avatar
					})
					this.banner.push({
						url: this.imgApi + this.plot.banner
					})
					if (!this.$comm.checkNull(this.plot.content)) {
						this.plot.content = "";
					}
					if (!this.plot.content.includes(this.imgApi)) {
						this.plot.content = this.plot.content
							.replace(/\<img src="/gi, '<img src=' + '\"' + this.imgApi);
					}
					this.plot.content = service.copy(this.plot.content);
					this.editor.context = service.copy(this.plot.content);
					this.loadShow = false
					this.load = true
				})
			},
			//添加标签
			addLabel() {
				if (this.plot.label.length >= 4) {
					this.$refs.uToast.show({
						message: "最多只能添加4个标签",
						type: "error"
					})
				} else {
					this.plot.label.push(this.newLabel)
				}
				this.newLabel = ""
				this.addLabelShow = false
			},
			//移除标签
			removeLabel(index) {
				this.plot.label.splice(index, 1)
			},
			//获得颜色类型
			getType(index) {
				switch (index) {
					case 0:
						return "success";
					case 1:
						return "warning";
					case 2:
						return "info";
					case 3:
						return "error";
				}
			},
			//图片上传成功回调
			afterRead(e) {
				if (e.name == "banner") {
					this.banner.push({
						url: e.file.url
					})
					pathToBase64(e.file.url).then(res => {
						this.plot.banner = res
					});
				} else {
					this.avatar.push({
						url: e.file.url
					})
					pathToBase64(e.file.url).then(res => {
						this.plot.avatar = res
					});
				}
				console.log("this.plot: ", this.plot);
			},
			//删除图片回调
			deletePic(e) {
				if (e.name == "banner") {
					this.banner.splice(e.index, 1)
					this.plot.banner = "";
				} else {
					this.avatar.splice(e.index, 1)
					this.plot.avatar = "";
				}
			},
			//计算亩数
			compute() {
				this.plot.mu = this.plot.lon * this.plot.wide
			},
			getBusinessType() {
				switch (this.plot.businessType) {
					case 0:
						return "只摘菜"
					case 1:
						return "只种菜"
					case 2:
						return "均支持"
				}
			},
			//确认土地类型
			confirmBusinessType(e) {
				this.plot.businessType = e.value[0].type
				this.businessTypeShow = false
			},
			getOpenType() {
				switch (this.plot.openType) {
					case 1:
						return "任何人"
					case 2:
						return "私有"
				}
			},
			confirmOpenType(e) {
				this.plot.openType = e.value[0].type
				this.openTypeShow = false
			},
			confirmPickOpenTimeShow(e) {
				this.plot.pickOpenTime = e.value
				this.pickOpenTimeShow = false
			},
			confirmPickOverTimeShow(e) {
				this.plot.pickOverTime = e.value
				this.pickOverTimeShow = false
			},
			confirmGrowOpenTimeShow(e) {
				this.plot.growOpenTime = e.value
				this.growOpenTimeShow = false
			},
			confirmGrowOverTimeShow(e) {
				this.plot.growOverTime = e.value
				this.growOverTimeShow = false
			},
			copyAddress() {
				uni.setClipboardData({
					data: this.plot.address
				});
			},
			dinwei() {
				uni.chooseLocation({
					success: (res) => {
						if (res.address == "") {
							this.$refs.uToast.show({
								message: "获取土地定位失败，请确认是否有勾选地址",
								type: "warning"
							})
						} else {
							this.plot.address = res.address
							this.plot.lat = res.latitude
							this.plot.lng = res.longitude
							this.$refs.uToast.show({
								message: "定位成功",
								type: "success"
							})
						}

					},
					fail: () => {
						this.$refs.uToast.show({
							message: "获取土地定位失败，请确认选择了正确的地址",
							type: "error"
						})
					},

				})
			},
			setUrlId(v) {
				this.plot.urlId = v;
			},
			/* 富文本上传图像 */
			editorUploadImg(path, callback, _t = this) {
				// 获取图像地址前缀
				let imgApi = this.$reqConfig.URLIMAGE
				// 获取请求头类型
				this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
				// 获取token
				this.token = uni.getStorageSync("merchantsToken").token
				uni.uploadFile({
					url: this.$reqConfig.UPLOADAPI + 'merchant/merchantGroupGoods/uploadImg',
					filePath: path,
					name: 'file',
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
					success: res => {
						let result = JSON.parse(res.data);
						if (result.code === 0) {
							callback(imgApi + result.result.uploads[0])
							this.$emit('setUrlId', result.result.id)
						}
					},
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	/deep/.head.data-v-52732d16 {
		width: 90%;
	}

	/deep/.u-tag__close--mini.data-v-3732d7af {
		z-index: 0;
	}

	/deep/.u-form-item__body__left__content__label.data-v-067e4733 {
		color: #8a8d92;
	}

	/deep/.u-upload__deletable.data-v-69e2a36e {
		height: 20px;
		width: 20px;
	}

	/deep/.u-tag__text--mini.data-v-3732d7af {
		font-size: 9px;
		line-height: 12px;
	}
</style>
